<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HEAD> 
	<META http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

	<LINK type="text/css" rel="stylesheet" href="http://layout.jquery-dev.net/lib/css/themes/base/jquery-ui.css" /> 

	<STYLE type="text/css"> 
		body {
			font-family:	Arial, Helvetica, sans-serif;
			font-size:		87.5%;
			background:		#F6F6F6;
			}
			body > .ui-layout-pane { /* Page Layout Only */
				background:		#F6F6F6 !important;
			}

		#dialogBox {
			overflow:	hidden;	/* eliminate space for scrollbar in dialog - not needed when using a layout */
			display:	none;
			padding:	0;		/* nullify ui-widget-content */
			padding-top: 4px;	/* add some white-space below titlebar for cosmetics */
			/* COULD add a border and/or padding if desire a different look...
			padding:	6px;
			border:		1px solid #BBB;
			*/
		}
		#dialogBox {
			/*
			 *	THIS HACK FIXES A DIALOG BOX POSITIONING BUG
			 *	prevents incorrect top/left values that are applied from taking effect
			 *	This page now uses a patched version of UI 1.8.1, so this hack no longer required
			 *	SEE UI Ticket #5662 - http://dev.jqueryui.com/ticket/5662#comment:3 
			top:		0 !important;
			left:		0 !important;
			 */
			/* background:	#AFA; DEBUGGING */
			/*position:	relative; - triggers resizeable._alsoResize bug when using Opera */
			}
			#dialogBox .ui-widget-content {
				/* nullify ui-widget-content bg-image - but KEEP widget bg-color */
				background-image: none;
			}
			#dialogBox .ui-layout-pane {
				/* start by removing all padding & scrolling */
				padding:	0;
				overflow:	hidden;
			}
			#dialogBox .pane-header ,
			#dialogBox .ui-layout-content ,
			#dialogBox .ui-layout-south {
				padding:	5px 10px;
			}
			#dialogBox .pane-header {
				border-width:	0 0 1px; /* nullify ui-widget-content border, except bottom */
			}
			#dialogBox .pane-footer {
				border-width:	1px 0 0; /* nullify ui-widget-content border, except top */
				font-size:		.85em;
				font-weight:	normal;
				padding:		2px 10px 4px;
			}
			#dialogBox .ui-layout-content {
				border:			0; /* nullify ui-widget-content border - 'pane' already has this */
				overflow:		auto;
			}
			#dialogBox .ui-layout-south {
				 /* has ui-widget-header for cosmetics - override defaults */
				 font-weight:	normal; /* NOT bold in statusbar */
				 font-size:		.85em;	/* smaller text */
				 padding-top:	2px;	/* nice and small */
				 padding-bottom:3px;
			}
			#dialogBox .ui-layout-resizer-west {
				/* NOTE: SOMETHING in the theme CSS is setting opacity here */
				opacity:	.01;
				filter:		alpha(opacity=1);
				background: #F00 url(http://layout.jquery-dev.net/lib/img/resizable-w.gif) no-repeat 0 center;
			}
			#dialogBox .ui-layout-resizer-west-closed {
				background-image: url(http://layout.jquery-dev.net/lib/img/resizable-e.gif); /* looks better */
				border:			1px solid #6C0;
				border-width:	1px 0;
				opacity:		.70;
				filter:			alpha(opacity=70);
			}
			#dialogBox .ui-layout-resizer-dragging ,
			#dialogBox .ui-layout-resizer-sliding ,
			#dialogBox .ui-layout-resizer:hover {
				opacity:		1;
				filter:			alpha(opacity=100);
				}
				#dialogBox .ui-layout-toggler {
					/*background:	#CCC;*/
				}

	</STYLE> 

	<SCRIPT type="text/javascript" src="http://layout.jquery-dev.net/lib/js/jquery-latest.js" language="JavaScript"></SCRIPT> 
	<!--<SCRIPT type="text/javascript" src="../lib/js/jquery-ui-1.8.1-dialogbox-fix.js" language="JavaScript"></SCRIPT>--> 
	<SCRIPT type="text/javascript" src="http://layout.jquery-dev.net/lib/js/jquery-ui-latest.js" language="JavaScript"></SCRIPT> 
	<SCRIPT type="text/javascript" src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></SCRIPT>
        <SCRIPT type="text/javascript" src="http://layout.jquery-dev.net/lib/js/debug.js"></SCRIPT>
	<!-- theme switcher -->
    <script type="text/javascript" src="http://layout.jquery-dev.net/lib/js/themeswitchertool.js"></script> 
	<script type="text/javascript">

	var
	//	page has a simple layout 
		pageLayout_settings = {
			applyDefaultStyles:	true
		,	initClosed:			true
		,	north__initClosed:	false
		}
	//	dialog-box contains a layout
	,	dialogLayout
	,	dialogLayout_settings = {
			zIndex:				0		// HANDLE BUG IN CHROME - required if using 'modal' (background mask)
		,	resizeWithWindow:	false	// resizes with the dialog, not the window
		,	spacing_open:		6
		,	spacing_closed:		6
		,	west__size:			'30%' 
		,	west__minSize:		100 
		,	west__maxSize:		300 
		,	south__size:		'auto' 
		,	south__closable:	false 
		,	south__resizable:	false 
		,	south__slidable:	false 
		//,	applyDefaultStyles:		true // DEBUGGING
		}
	; 

	$(document).ready(function() { 

		// simple page layout
		$('body').layout( pageLayout_settings );

		// dialogBox dialog 
		$("#dialogBox").dialog({ 
			title:		'Dialog Title'
		,	width:		Math.floor($('body').width()  * .70)
		,	height:		Math.floor($('body').height() * .65)
		,	autoOpen:	true
		,	closeOnEsc:	true
		//,	modal:		true
		,	open:		function() {
							if (!dialogLayout)
								// init layout *the first time* dialog opens
								dialogLayout = $("#dialogBox").layout( dialogLayout_settings );
							else
								// just in case - probably not required
								dialogLayout.resizeAll();
						}
		,	resize:		function(){ if (dialogLayout) dialogLayout.resizeAll(); }
		});

		// Dialog Link 
		$('#dialogOpener').click(function(){ 
			$('#dialogBox').dialog('open'); 
			return false; 
		}); 

		addThemeSwitcher('body > .ui-layout-north',{ top: '13px', right: '20px' });

	});

	</script>

	<TITLE>Layout in Dialog Demo</TITLE> 
</HEAD> 
<BODY> 

<!-- SIMPLE PAGE-LAYOUT -->
<DIV class="ui-layout-north" style="text-align: center;">
	<BUTTON id="dialogOpener"><B>Open Dialog</B></BUTTON>
	<!--
	&nbsp; &nbsp; &nbsp;
	<BUTTON onClick="$('#dialogBox').css('position','relative')">Fix Opera</BUTTON>
	-->

	&nbsp; &nbsp; &nbsp;
	<BUTTON onClick="if (dialogLayout) dialogLayout.resizeAll()">Refresh Dialog Layout</BUTTON>
	&nbsp; &nbsp; &nbsp;
	<BUTTON onClick="removeUITheme()">Remove UI Theme</BUTTON>
</DIV>
<DIV class="ui-layout-center"> Center-pane
	<P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P>

	<P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P>
	<P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P>

	<P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P>
	<P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P>

	<P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P>
	<P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P><P>...</P>

</DIV>
<DIV class="ui-layout-south"> South-pane </DIV>
<DIV class="ui-layout-west">  West-pane  </DIV>
<DIV class="ui-layout-east">  East-pane  </DIV>


<!-- DIALOG BOX w/ INNER-LAYOUT -->
<DIV id="dialogBox"> 

	<DIV class="ui-layout-west ui-widget-content ui-corner-all"> 
		<DIV class="pane-header ui-state-active">West Header</DIV>

		<DIV class="ui-layout-content ui-widget-content">
			Scrolling content...
			<P>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...</P>

		</DIV>
		<DIV class="pane-footer ui-state-default">Center Footer</DIV>
	 </DIV> 

	<DIV class="ui-layout-center ui-widget-content ui-corner-all"> 
		<DIV class="pane-header ui-state-active">Center Header</DIV>
		<DIV class="ui-layout-content ui-widget-content" style="border: 0;">
			Scrolling content...
			<P><A href="http://layout.jquery-dev.net/demos.html">Go to the Demos page</A></P>
			<!-- THIS PROBLEM IS NOW FIXED IN UI 1.8.4
			<P>NOTE: This demo is using a patched copy of jquery-ui-1.8.1 to 
				fix <u>2 bugs</u> in the UI Resizable._alsoResize method used by the dialog. 
				One of the bugs is Opera-specific.</P> 
			<P>I committed a patch the fixes both bugs, so the issues should be fixed in the next 
				maintentance release of UI (1.8.3?)</P>
			<P><B>In the meantime</B>, both bugs can be avoided by adding an extra DIV inside the dialog
				to contain the layout - set it's height &amp; width to 100%.
				If you need assistance with this, ask in the Layout discussion forum.
			-->

			<P style="overflow: hidden;"><INPUT type="text" value="Input Test..." style="width: 99%;">
			<P><SELECT>
				<OPTION value="19">Picklist Test</OPTION>
				<OPTION value="17">tropical storm</OPTION>
				<OPTION value="18">hurricane</OPTION>
				<OPTION value="19">severe thunderstorms</OPTION>
				<OPTION value="20">thunderstorms</OPTION>

				<OPTION value="21">mixed rain and snow</OPTION>
				<OPTION value="22">mixed rain and sleet</OPTION>
				<OPTION value="23">mixed snow and sleet</OPTION>
				<OPTION value="24">freezing drizzle</OPTION>
				<OPTION value="25">drizzle</OPTION>
				<OPTION value="26">freezing rain</OPTION>

				<OPTION value="27">showers</OPTION>
				<OPTION value="28">showers</OPTION>
				<OPTION value="29">snow flurries</OPTION>
				<OPTION value="30">light snow showers</OPTION>
				<OPTION value="31">blowing snow</OPTION>
				<OPTION value="32">snow</OPTION>

				<OPTION value="33">hail</OPTION>
				<OPTION value="34">sleet</OPTION>
				<OPTION value="35">dust</OPTION>
				<OPTION value="36">foggy</OPTION>
				<OPTION value="37">haze</OPTION>
				<OPTION value="38">smoky</OPTION>

				<OPTION value="39">blustery</OPTION>
				<OPTION value="40">windy</OPTION>
				<OPTION value="41">cold</OPTION>
				<OPTION value="42">cloudy</OPTION>
				<OPTION value="43">mostly cloudy (night)</OPTION>
				<OPTION value="44">mostly cloudy (day)</OPTION>

				<OPTION value="45">partly cloudy (night)</OPTION>
				<OPTION value="46">partly cloudy (day)</OPTION>
				<OPTION value="47">clear (night)</OPTION>
				<OPTION value="48">sunny</OPTION>
				<OPTION value="49">fair (night)</OPTION>
				<OPTION value="50">fair (day)</OPTION>

				<OPTION value="51">mixed rain and hail</OPTION>
				<OPTION value="52">hot</OPTION>
				<OPTION value="53">isolated thunderstorms</OPTION>
				<OPTION value="54">scattered thunderstorms</OPTION>
				<OPTION value="55">scattered thunderstorms</OPTION>
				<OPTION value="56">scattered showers</OPTION>

				<OPTION value="57">heavy snow</OPTION>
				<OPTION value="58">scattered snow showers</OPTION>
				<OPTION value="59">heavy snow</OPTION>
				<OPTION value="60">partly cloudy</OPTION>
				<OPTION value="61">thundershowers</OPTION>
				<OPTION value="62">snow showers</OPTION>

				<OPTION value="63">isolated thundershowers</OPTION>
			</SELECT></P>
			<P>	...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>

				...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>
				...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...</P>

		</DIV>
		<DIV class="pane-footer ui-state-default">Center Footer</DIV>
	</DIV> 

	<DIV class="ui-layout-south ui-widget-header ui-corner-all"> 
		South Pane ( messages or statusbar )
	</DIV>

</DIV> 

</BODY> 
</HTML>